<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     *{padding: 0; margin: 0; list-style-type: none; text-decoration: none;}
     .cont{width: 800px; height: 500px; margin: 100px auto; background: red; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;}      
     .cont span{ color: #fff; font-size: 80px;transition: all 2s;}
     .huaduo{width: 200px; height: 200px;  transform-style: preserve-3d; transition: 1s; transform: perspective(300px) rotateY(0deg); position: absolute;}
    .huaduo span{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-origin: center; }
    
    @keyframes change {
        0%{
            transform: translateY(-500px);
        }
        100%{
            transform: translateY(0px);
        }
    }   
</style>
<body>
    <div class="cont">
        <span  draggable="true">周</span>
        <span  draggable="true">必</span>
        <span  draggable="true">文</span>
        <div class="huaduo">
            <span style="--i:1;">文</span>
            <span style="--i:2;">字</span>
            <span style="--i:3;">特</span>
            <span style="--i:4;">效</span>
            <span style="--i:5;">来</span>
            <span style="--i:6;">了</span>
            <span style="--i:4;">效</span>
            <span style="--i:4;">效</span>
            <span style="--i:4;">效</span>
            <span style="--i:4;">效</span>
        </div>
    </div>
    <script>
        let cont = document.querySelector('.cont');
        let spans = document.querySelectorAll('.cont > span');
        let huadong = document.querySelector('.huaduo');
        let boxleft = cont.offsetLeft;
        let boxtop =  cont.offsetTop;
        for(let i = 0; i < spans.length; i++){
             spans[i].style.animation = `change ${(i+1)*150}ms`;
             spans[i].style.animationFillMode = 'forwards';
             spans[i].style.animationDelay = `${(i+1)*500}ms`;
             //监听动画结束
             spans[i].addEventListener('animationend', function(){
                 //改变样式
                 spans[i].style.animation = '';
                 spans[i].style.animationFillMode = '';
                 spans[i].style.animationDelay = '';
                 let lefts = spans[i].offsetLeft;
                 let tops = spans[i].offsetTop;
                 huadong.style.left = lefts + 'px';
                 huadong.style.top = tops + 100 + 'px';
             });
        }
    </script>
</body>
</html>